<template>
  <div id="chart-datazoomy"
    style="width:100%;height:100%"></div>
</template>

<script>
  import * as echarts from 'echarts';
  const colorList = [
    ['#384552', '#FDDA35'],
    ['#041F5A', '#00FEB4'],
    ['#04205B', '#19B9EA'],
    ['#041F5B', '#276FF5']
  ];
  export default {
    name: 'ChartDatazoom',
    props: {
      objdata: {
        type: Object,
        default: () => {}
      }
    },
    watch: {
      objdata(obj) {
        let { data, yAxisData } = obj;
        this.bardata = data;
        this.yAxisData = yAxisData;
        this.setyAxisData();
        this.$nextTick(() => {
          this.initChart();
        });
      }
    },
    data() {
      return {
        xAxisData: [],
        bardata: [],
        richData: {}
      };
    },
    created() {},
    methods: {
      setyAxisData() {
        this.yAxisData.forEach((item, i) => {
          let key = 'order' + (i + 1);
          let temp = {
            color: i > 2 ? colorList[3][1] : colorList[i][1],
            width: 20,
            height: 20,
            lineHeight: 20,
            fontSize: 14,
            fontWeight: 600,
            align: 'center',
            borderColor: i > 2 ? colorList[3][1] : colorList[i][1],
            borderWidth: 1
          };
          this.richData[key] = temp;
        });
        this.richData['text'] = {
          width: 50,
          height: 20,
          lineHeight: 20,
          fontSize: 14
        };
        console.log(this.richData);
      },
      initChart() {
        const dom = document.getElementById('chart-datazoomy');
        if (dom) {
          const chart = echarts.init(dom);
          const options = {
            grid: {
              top: 30,
              bottom: 20,
              right: 40,
              left: 100
            },
            tooltip: {
              trigger: 'axis',
              formatter: '{b0}<br />{a}：{c0}'
            },
            dataZoom: [
              {
                type: 'slider',
                maxValueSpan: 20, //显示数据的条数
                show: true,
                yAxisIndex: [0],
                handleSize: 0, //滑动条的 左右2个滑动条的大小
                height: '90%', //组件高度
                left: 600, //左边的距离
                right: 8, //右边的距离
                top: 50, //上边边的距离
                borderColor: 'rgba(43,48,67,0.8)',
                showDataShadow: false, //是否显示数据阴影 默认auto
                showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
                brushSelect: false,
                zoomLock: true,
                realtime: true //是否实时更新
              },
              {
                type: 'inside', //内置滑动，随鼠标滚轮展示
                yAxisIndex: [0],
                start: 1, //初始化时，滑动条宽度开始标度
                end: 100, //初始化时，滑动条宽度结束标度
                zoomOnMouseWheel: false, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。。
                moveOnMouseMove: true,
                moveOnMouseWheel: true //鼠标滚轮实现移动
              }
            ],
            yAxis: [
              {
                name: '行政区  规模',
                nameGap: 0,
                inverse: true,
                nameLocation: 'start',
                nameTextStyle: {
                  color: '#fff',
                  padding: [0, 0, 0, -18]
                },
                data: this.yAxisData,
                axisLabel: {
                  textStyle: {
                    color: '#fff'
                  },
                  formatter: (params, index) => {
                    const num = this.yAxisData.indexOf(params);
                    return `{order${num + 1}|${num + 1}}  {text|${params}}`;
                  },
                  rich: this.richData
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                }
              },
              {
                name: '单位：公顷',
                nameGap: 0,
                inverse: true,
                nameLocation: 'start',
                nameTextStyle: {
                  color: '#fff',
                  padding: [0, 20, 0, 0]
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                }
              }
            ],
            xAxis: {
              show: false
            },
            series: [
              {
                name: '规模',
                type: 'bar',
                barWidth: 14,
                showBackground: true,
                itemStyle: {
                  color: function (params) {
                    let colorItem = colorList[params.dataIndex];
                    if (!colorItem) {
                      colorItem = colorList[3];
                    }
                    return new echarts.graphic.LinearGradient(
                      // 左上右下
                      0,
                      0,
                      1,
                      0,
                      [
                        {
                          offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                          color: colorItem[0]
                        }, //柱图渐变色
                        {
                          offset: 1, //指100%处的颜色
                          color: colorItem[1]
                        }
                      ]
                    );
                  }
                },
                data: this.bardata
              }
            ]
          };
          chart.setOption(options);
        }
      }
    }
  };
</script>